<template>
    <div class="captain">
        <div class="data_list">
            <el-table :data="tableData" :max-height="tableMaxHeight" style="width: 100%">
                <!--ID-->
                <el-table-column align="left" label="ID" prop="id"></el-table-column>
                <!--账号名称-->
                <el-table-column align="left" prop="username" :label="$t('common.accountName')"></el-table-column>
                <!--操作-->
                <el-table-column align="left" :label="$t('common.operation')">
                    <template slot-scope="scope">
                        <el-button @click="showDialog(scope.row)" type="text">{{$t('authority.allotRole')}}</el-button>
                    </template>
                </el-table-column>
            </el-table><!--end table-->
        </div>

        <pagination @pageChange="pageChange" :page="page">分页组件</pagination>

        <!--分配角色start-->
        <alert-dialog :visible.sync="setRoleTypeDialog" width="416px" :title="$t('authority.allotRole')">
            <el-form ref="form" :model="form" :rules="rules" label-position="top">
                <!--账号名称-->
                <el-form-item :label="$t('common.accountName')">
                    <el-input :disabled="true" v-model="form.username" type="text" :placeholder="$t('common.accountName')"></el-input>
                </el-form-item>
                <!--分配角色-->
                <el-form-item :label="$t('authority.allotRole')" prop="roleId">
                    <el-select v-model="form.roleId" style="width: 100%;" @change="roleTypeChange">
                        <el-option v-for="item in customTypeList" v-if="item.roleId!==3" :key="item.roleId" :value="item.roleId" :label="$i18n.locale==='zhCN' ? item.roleName : item.idName"></el-option>
                    </el-select>
                </el-form-item>
                <!--待分配分配角色时显示其主管-->
                <el-form-item v-if="form.roleId === 1" :label="$t('authority.groupList')" prop="groupId"><!--组别列表-->
                    <el-select v-model="form.groupId" style="width: 100%;" :placeholder="$t('authority.chooseGroup')"><!--请选择组别-->
                        <el-option v-for="item in captainList" :key="item.userId" :value="item.userId" :label="item.username"></el-option>
                    </el-select>
                </el-form-item>
                <!--负责的APP-->
                <el-form-item v-if="form.roleId === 1" prop="appName" :label="$t('salesManage.responsibleAPP')">
                    <select-app-list v-model="form.appName" :multiple="true" :placeholder="$t('salesManage.responsibleAPP')"></select-app-list>
                </el-form-item>
                <!--营销类型-->
                <el-form-item v-if="form.roleId === 1" prop="marketingType" :label="$t('salesManage.marketingType')">
                    <el-select v-model="form.marketingType" :multiple="true" :placeholder="$t('salesManage.marketingType')" style="width: 100%;">
                        <el-option v-for="item in keyMap.marketingType()" :key="item.value" :value="item.value" :label="item.label"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button @click="setRoleTypeDialog = false" type="default">{{$t('common.cancel')}}</el-button>
                <el-button @click="setRoleType()" type="primary">{{$t('common.submit')}}</el-button>
            </div>
        </alert-dialog><!--分配角色end-->
    </div>
</template>

<script>
import Pagination from '@/components/pagination';
import mixin from '@/service/mixin';
import AlertDialog from '@/components/alert-dialog';
import { keyMap } from '@/config';
import SelectAppList from '@/components/select-app-list';

export default {
    name: 'waitingList',
    props: {
        activeTab: {
            type: String,
            required: true
        },
        searchForm: {
            type: Object,
            required: true
        },
        // 分配角色
        customTypeList: {
            type: Array,
            required: true
        },
    },
    components: {
        Pagination,
        AlertDialog,
        SelectAppList,
    },
    mixins: [mixin],
    data() {
        return {
            keyMap,
            thisRoleType: 0,
            isListening: false,
            userId: '',
            form: {
                userId: '',
                auditorName: '',
                username: '',
                groupId: '',
                roleType: '',
                roleId: '',
                appName: [],
                marketingType: [],
            },
            rules: {
                roleType: [
                    { required: true, message: this.$t('authority.plsChooseRole'), trigger: 'change' }
                ],
                roleId: [
                    { required: true, message: this.$t('authority.plsChooseRole'), trigger: 'change' }
                ],
                groupId: [
                    { required: true, message: this.$t('verify.plsChoose'), trigger: 'change' }
                ],
                appName: [
                    { required: true, message: this.$t('verify.plsChoose'), trigger: 'change' }
                ],
                marketingType: [
                    { required: true, message: this.$t('verify.plsChoose'), trigger: 'change' }
                ],
            },
            setRoleTypeDialog: false,
            captainList: []
        };
    },
    watch: {
        activeTab(val) {
            if ('waitingList' === val) {
                this.page.currentPage = 1;
                this.getTableData();
                this.getCaptainList();
            }
        },
        'searchForm.search'(val) {
            if (val && this.activeTab === 'waitingList') {
                this.page.currentPage = 1;
                this.getTableData();
            }
        }
    },
    methods: {
        getTableData(page = this.page) {
            const params = {
                roleId: this.thisRoleType,
                username: this.searchForm.username,
                leaderId: '',
                page: {
                    pageNo: page.currentPage,
                    pageSize: this.page.pageSize
                }
            };
            this.$api.telSales.getAllUserInfo(params).then((res) => {
                const { status, data, error } = res;
                if ('1' === status && '00000000' === error) {
                    this.tableData = data.data;
                    this.page.recordsTotal = data.pageCount;
                    if (this.searchForm.search) {
                        this.$emit('search', this.searchForm);
                    }
                    this.tableMaxHeight = window.document.body.clientHeight - 230;
                }
            });
        },
        showDialog(row) {
            this.form.userId = row.userId;
            this.form.username = row.username;
            this.form.groupId = row.leaderId;
            this.form.appName = [];
            this.form.marketingType = [];
            this.setRoleTypeDialog = true;
            this.getCaptainList();
            this.$nextTick(() => {
                this.$refs.form.resetFields();
            });
        },
        setRoleType() {
            this.$refs.form.validate((val) => {
                if (val) {
                    const { userId, roleId, groupId, appName, marketingType } = this.form;
                    const params = {
                        // auditorId: this.form.auditorId,
                        userId,
                        roleId,
                        leaderId: groupId,
                        appName: appName.join(','),
                        marketingType: marketingType.join(','),
                    };
                    this.$api.telSales.updateUserRole(params).then((res) => {
                        const { status, error } = res;
                        if ('1' === status && '00000000' === error) {
                            this.setRoleTypeDialog = false;
                            this.$message({
                                message: this.$tc('common.successfulOperation'),
                                showClose: true,
                                duration: 1000,
                                type: 'success',
                            });
                            this.getTableData();
                            this.form.roleId = '';
                        }
                    });
                }
            });
        },
        getCaptainList() {
            const params = {
                roleId: 2,
                name: '',
                leaderId: ''
            };
            this.$api.telSales.getAllUserInfo(params).then((res) => {
                const { status, data, error } = res;
                if ('1' === status && '00000000' === error && data.data) {
                    this.captainList = data.data;
                }
            });
        },
        roleTypeChange(val) {
            if (val !== 1) {
                this.form.groupId = '';
            }
        }
    },
    created() {
        if (this.activeTab === 'waitingList') {
            this.getTableData();
            this.getCaptainList();
        }
    }
};
</script>

<style lang="scss" scoped>
.data_list{
    background-color: #fff;
    padding: 10px 16px;
}
</style>
